@import '../global/variables.css';

.avatar {
  display: inline-block;
  object-fit: cover;
  object-position: center;

  border-radius: var(--ring-border-radius);
}

.round {
  border-radius: 50%;
}

.avatarShadow {
  /* See https://stackoverflow.com/questions/21414925/why-doesnt-inset-box-shadow-work-over-images */

  filter: url('avatar-shadow-filter.svg#inset-shadow');
}

.avatarInfo {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100%;

  color: var(--ring-secondary-color);
  border-radius: inherit;

  background-color: var(--ring-tag-background-color);
}

.subavatar {
  position: absolute;
  top: 15px;
  left: 27px;

  border: 1px var(--ring-content-background-color) solid;
}

.empty {
  display: inline-block;

  box-sizing: border-box;

  border: 1px solid var(--ring-borders-color);
}
